<template>
    <div class="left-control-panel"
        style="width: 300px; height: 100vh; padding: 1rem; border-right: 1px solid var(--color-border); background-color: var(--color-background-soft); overflow-y: auto; display: flex; flex-direction: column;">

        <!-- 固定头部 -->
        <div class="panel-header" style="flex-shrink: 0; margin-bottom: 1rem;">
            <h2 style="margin: 0 0 1rem 0; color: var(--color-heading);">数据中心控制面板</h2>

            <!-- Statistics -->
            <div class="stats"
                style="background: var(--color-background); padding: 1rem; border-radius: var(--border-radius-lg); margin-bottom: 1rem;">
                <h3 style="margin: 0 0 0.5rem 0; color: var(--color-heading); font-size: var(--font-size-lg);">统计信息</h3>
                <div style="font-size: var(--font-size-sm); color: var(--color-text-light);">
                    <p>列数: {{ statistics.rowCount }}</p>
                    <p>机柜总数: {{ statistics.cabinetCount }}</p>
                    <p>设备总数: {{ statistics.deviceCount }}</p>
                </div>
            </div>

            <!-- Add Element Buttons -->
            <div class="add-buttons" style="margin-bottom: 1rem;">
                <button @click="$emit('start-add-row')"
                    style="width: 100%; margin-bottom: 0.5rem; padding: 0.75rem; background: var(--color-primary); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                    添加机柜列
                </button>
                <button @click="$emit('clear-all')"
                    style="width: 100%; padding: 0.75rem; background: var(--color-danger); color: white; border: none; border-radius: var(--border-radius); cursor: pointer;">
                    清空所有
                </button>
            </div>
        </div>

        <!-- 可滚动内容区域 -->
        <div class="panel-content" style="flex: 1; overflow-y: auto; padding-right: 0.5rem;">
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
interface Props {
    statistics: {
        rowCount: number
        cabinetCount: number
        deviceCount: number
    }
}

defineProps<Props>()

defineEmits<{
    'start-add-row': []
    'clear-all': []
}>()
</script>